<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="admin/common/frame :: head(~{},~{},~{})"/>
<body>
<div class="wrap">
    <div th:replace="admin/common/frame :: left"></div>
    <div th:replace="admin/common/frame :: top"></div>
    <div class="main">
        <div class="content">
            <div id="user-container">
                <table class="table text-center border">
                    <thead class="w-100">
                    <tr class="row mx-0">
                        <td class="col-2 border-top-0 border-right">编号</td>
                        <td class="col-2 border-top-0 border-right">用户名</td>
                        <td class="col-2 border-top-0 border-right">注册时间</td>
                        <td class="col-3 border-top-0 border-right">是否禁用</td>
                        <td class="col-3 border-top-0">操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="row mx-0" v-for="(user,i) in users">
                        <td class="col-2 p-0 border-right">{{user.id}}</td>
                        <td class="col-2 p-0 border-right">{{user.username}}</td>
                        <td class="col-2 p-0 border-right">{{user.createAt}}</td>
                        <td class="col-3 p-0 border-right"><span v-bind:class="[user.deleted ? 'badge-danger' : 'badge-primary', 'badge']">{{user.deleted ? '禁用':'正常'}}</span></td>
                        <td class="col-3 p-0 border-right">
                            <button @click="updateUser(i, user)" v-bind:class="[user.deleted ? 'btn-primary' : 'btn-danger', 'btn btn-sm']">{{user.deleted ? '解禁' : '禁用'}}</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <th:block th:include="admin/pagenation :: page"></th:block>
            </div>
        </div>
    </div>
</div>
<th:block th:include="admin/common/scripts :: scripts"/>
<script>
    new Vue({
        el: "#user-container",
        data: {
            currentPage: 0,
            users: []
        },
        created() {
            this.go(0)
        },
        methods: {
            go(direction) {
                if (this.currentPage + direction === -1) {
                    return
                }
                this.currentPage = this.currentPage + direction
                $.get('/admin/users', {page: this.currentPage}, res => {
                    if (res.code === -1) {
                        alert(res.message)
                        return
                    }
                    console.log(res)
                    this.users = res.data.content
                })
            },
            updateUser(i, user) {
                let that = this
                $.post('/admin/updateUserState', {id: user.id}, res => {
                    if (res.code === -1) {
                        alert(res.message)
                        return
                    }
                    that.$data.users[i].deleted = !user.deleted
                })
            }
        }
    })
</script>
</body>
</html>